<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客列表功能测试</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="../../frontend/assets/css/font-awesome.min.css" rel="stylesheet">
</head>
<body class="bg-gray-50 p-6">
    <div class="max-w-6xl mx-auto">
        <h1 class="text-3xl font-bold text-gray-800 mb-6">博客列表功能测试</h1>
        
        <div class="bg-white rounded-lg shadow p-6 mb-6">
            <h2 class="text-xl font-semibold mb-4">测试说明</h2>
            <p class="text-gray-600 mb-4">此页面用于测试博客列表管理功能，包括：</p>
            <ul class="list-disc list-inside text-gray-600 space-y-2">
                <li>从Blogs.json文件加载数据</li>
                <li>显示ID、标题、摘要、内容文件、分类、标签、作者、作者职称、发布日期</li>
                <li>搜索功能</li>
                <li>分页功能</li>
                <li>查看、编辑、删除操作</li>
            </ul>
        </div>

        <div class="bg-white rounded-lg shadow p-6">
            <h2 class="text-xl font-semibold mb-4">功能测试</h2>
            <div class="space-y-4">
                <button onclick="testLoadBlogs()" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
                    测试加载博客数据
                </button>
                <button onclick="testSearch()" class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600">
                    测试搜索功能
                </button>
                <button onclick="testPagination()" class="bg-purple-500 text-white px-4 py-2 rounded hover:bg-purple-600">
                    测试分页功能
                </button>
            </div>
            
            <div id="testResults" class="mt-6 p-4 bg-gray-100 rounded-lg">
                <p class="text-gray-600">点击上方按钮开始测试...</p>
            </div>
        </div>
    </div>

    <script>
        // 模拟commonManager
        window.commonManager = {
            formatDate: function(dateString) {
                if (!dateString) return '未设置';
                try {
                    const date = new Date(dateString);
                    return date.toLocaleDateString('zh-CN');
                } catch (e) {
                    return dateString;
                }
            },
            showSuccess: function(message) {
                console.log('Success:', message);
                document.getElementById('testResults').innerHTML = `<p class="text-green-600">✓ ${message}</p>`;
            },
            showError: function(message) {
                console.log('Error:', message);
                document.getElementById('testResults').innerHTML = `<p class="text-red-600">✗ ${message}</p>`;
            },
            confirm: async function(message, title) {
                return confirm(message);
            }
        };

        // 测试加载博客数据
        async function testLoadBlogs() {
            try {
                const response = await fetch('../../frontend/AiBlog/Blogs.json');
                if (response.ok) {
                    const data = await response.json();
                    const blogCount = data.blogs ? data.blogs.length : 0;
                    commonManager.showSuccess(`成功加载 ${blogCount} 篇博客数据`);
                    
                    // 显示第一条博客的详细信息
                    if (data.blogs && data.blogs.length > 0) {
                        const firstBlog = data.blogs[0];
                        const details = `
                            <div class="mt-4 p-4 bg-white rounded border">
                                <h3 class="font-semibold mb-2">第一条博客信息：</h3>
                                <p><strong>ID:</strong> ${firstBlog.id}</p>
                                <p><strong>标题:</strong> ${firstBlog.title}</p>
                                <p><strong>摘要:</strong> ${firstBlog.summary || '无'}</p>
                                <p><strong>内容文件:</strong> ${firstBlog.contentFile || '无'}</p>
                                <p><strong>分类:</strong> ${firstBlog.category || '无'}</p>
                                <p><strong>标签:</strong> ${firstBlog.tags ? firstBlog.tags.join(', ') : '无'}</p>
                                <p><strong>作者:</strong> ${firstBlog.author || '无'}</p>
                                <p><strong>作者职称:</strong> ${firstBlog.authorTitle || '无'}</p>
                                <p><strong>发布日期:</strong> ${firstBlog.publishDate || '无'}</p>
                            </div>
                        `;
                        document.getElementById('testResults').innerHTML += details;
                    }
                } else {
                    throw new Error(`HTTP ${response.status}`);
                }
            } catch (error) {
                commonManager.showError(`加载博客数据失败: ${error.message}`);
            }
        }

        // 测试搜索功能
        async function testSearch() {
            try {
                const response = await fetch('../../frontend/AiBlog/Blogs.json');
                if (response.ok) {
                    const data = await response.json();
                    const blogs = data.blogs || [];
                    
                    // 测试搜索标题
                    const titleResults = blogs.filter(blog => 
                        blog.title && blog.title.toLowerCase().includes('ai')
                    );
                    
                    // 测试搜索分类
                    const categoryResults = blogs.filter(blog => 
                        blog.category && blog.category.toLowerCase().includes('产品')
                    );
                    
                    commonManager.showSuccess(`搜索测试完成：标题包含"AI"的有 ${titleResults.length} 篇，分类包含"产品"的有 ${categoryResults.length} 篇`);
                } else {
                    throw new Error(`HTTP ${response.status}`);
                }
            } catch (error) {
                commonManager.showError(`搜索测试失败: ${error.message}`);
            }
        }

        // 测试分页功能
        async function testPagination() {
            try {
                const response = await fetch('../../frontend/AiBlog/Blogs.json');
                if (response.ok) {
                    const data = await response.json();
                    const blogs = data.blogs || [];
                    const pageSize = 3;
                    const totalPages = Math.ceil(blogs.length / pageSize);
                    
                    commonManager.showSuccess(`分页测试：总共 ${blogs.length} 篇博客，每页 ${pageSize} 篇，共 ${totalPages} 页`);
                    
                    // 显示第一页数据
                    const firstPage = blogs.slice(0, pageSize);
                    const pageInfo = `
                        <div class="mt-4 p-4 bg-white rounded border">
                            <h3 class="font-semibold mb-2">第一页数据（前${pageSize}篇）：</h3>
                            ${firstPage.map(blog => `<p>• ${blog.title}</p>`).join('')}
                        </div>
                    `;
                    document.getElementById('testResults').innerHTML += pageInfo;
                } else {
                    throw new Error(`HTTP ${response.status}`);
                }
            } catch (error) {
                commonManager.showError(`分页测试失败: ${error.message}`);
            }
        }
    </script>
</body>
</html>


